$number:random(2);

.trashBody {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}


.trashList {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0;
    height: 60px;
    width: 25%;
    height: auto;
    justify-content: center;
    padding: 10px;
    margin: 10px 0;
    transition-duration: 600ms;
    .top {
        border-radius: 10px 10px 0 0;
        overflow: hidden;
        width: 100%;
        height: 100px;
        position: relative;
        background-image: url('../imgs/trash'+$number+'.png');
        background-position: center;
        background-size: cover;
        .mask{
            position: absolute;
            z-index: 999;
            background: rgba(100, 100, 100, 0.6);
            color: #ffffff;
            opacity: 0;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            // pointer-events:none;
            display: flex;
            align-items: center;
            justify-content: center;
            .delete{
                color: rgb(237, 56, 56);
                font-size: 30px;
            }
        }
    }
    .bottom{
       background-color: white;
       width: 100%;
       height: auto;
       display: flex;
       border-radius: 0 0 10px 10px;     
       box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
       p{
          flex: 1;
          text-align: center;
       }
    }
   
}
.trashList:hover{
    transform:translate(0,-15px);
    transition-duration: 600ms;
    cursor: pointer;
    .mask{
        opacity: 1;  
        transition-duration: 600ms;
    }
}